<template>
  <div>
    <!-- 卡片 -->
    <a-row :gutter="24" style="margin: 10px">
      <a-col :sm="6" class="padding-r-no">
        <div class="card-inner">
          <div class="avatar">
            <img :src="previewImage" alt="" />
          </div>
          <div class="userName info">{{ baseInfo.userName }}</div>
          <div class="info-base">
            <phone-outlined />：
            {{ baseInfo.phoneNumber || '- -' }}
          </div>
          <div class="info-base">
            <mail-outlined />：
            {{ baseInfo.emailAddress || '- -' }}
          </div>
        </div>
      </a-col>
      <a-col :sm="18" class="padding-r-no">
        <div class="card-inner-detail">
          <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="LoginAttempts" :tab="l('LoginAttempts')">
              <login-attempts />
            </a-tab-pane>
            <!-- <a-tab-pane key="2" :tab="l('Permissions')" force-render
              >Content of Tab Pane 2</a-tab-pane
            >
            <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane> -->
          </a-tabs>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
  import { AppComponentBase } from '/@/shared/component-base';
  import { defineComponent } from 'vue';
  import { CurrentUserProfileEditDto, ProfileServiceProxy } from '/@/shared/service-proxies';
  import { MailOutlined, PhoneOutlined } from '@ant-design/icons-vue';
  import LoginAttempts from './login-attempts/login-attempts.vue';

  export default defineComponent({
    name: 'user-dashboard',
    mixins: [AppComponentBase],
    components: {
      MailOutlined,
      PhoneOutlined,
      LoginAttempts,
    },
    data() {
      return {
        profileService: new ProfileServiceProxy(),
        baseInfo: new CurrentUserProfileEditDto(),
        // 头像
        previewImage: '/assets/images/user.png',
        activeKey: 'LoginAttempts',
      };
    },
    created() {
      this.fillServiceProxy();
      this.profileService.getCurrentUserProfileForEdit().then((res) => {
        this.baseInfo = res;
        if (res.profilePictureId) {
          this.getProfilePicture(res.profilePictureId);
        }
      });
    },
    methods: {
      getProfilePicture(profilePictureId: string): void {
        this.loading = true;
        this.profileService
          .getProfilePictureById(profilePictureId)
          .finally(() => (this.loading = false))
          .then(async (result) => {
            if (result && result.profilePicture) {
              let profilePreviewImage = 'data:image/jpeg;base64,' + result.profilePicture;
              this.previewImage = profilePreviewImage;
            }
          });
      },
    },
  });
</script>

<style lang="less" scoped>
  @import './user-dashboard.less';
</style>
